<template>
  <div class="custom-tree-container">
    <div class="block">
      <p>菜单数据</p>
      <el-tree
        :data="data"
        node-key="id"
        v-loading="loadingShow"
        default-expand-all
        :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="() => append(data)">添加菜单</el-button>
          <el-button type="text" size="mini" @click="() => update(data)" v-if="data.id!=0 || data.parentId!=0">修改</el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)" v-if="data.id!=0 || data.parentId!=0">删除菜单</el-button>
        </span>
      </span>
      </el-tree>
    </div>
    <hl-dialog :dialog-show="dialogVisible" width="40%" :title="title" @handleClose="handleClose" @handleSave="handleSave">
      <menu-add ref="menuRef" :dialog-show="dialogVisible" :menu-id="menuId" :parent-id="parentId" :parent-name="parentName"></menu-add>
    </hl-dialog>
  </div>
</template>

<script>
import HlDialog from '@/components/HlDialog'
import MenuAdd from '@/views/sys/add/MenuAdd'
export default {
  name: 'MenuListConfig',
  components: { MenuAdd, HlDialog },
  data() {
    return {
      data: [],
      loadingShow: true,
      dialogVisible: false,
      menuId: 0,
      title: '',
      parentId: '',
      parentName: ''
    }
  },
  created () {
    this.getAuthorityAll()
  },
  methods: {
    // 获取所有菜单
    getAuthorityAll() {
      this.loadingShow = true
      this.$http.get('/frontend/api/authority/getAuthorityAll', { showRoot: true }).then(res => {
        this.data = this.checkData(res)
        this.loadingShow = false
      }).catch(errer => {
        this.loadingShow = false
        this.$message.error(errer.message)
      })
    },
    // 递归把title改为label
    checkData(data) {
      for (const menu of data) {
        menu.label = menu.title
        console.info('for', menu)
        if (menu.children instanceof Array) {
          this.checkData(menu.children)
        }
      }
      return data
    },
    // 关闭窗口
    handleClose () {
      this.dialogVisible = false
    },
    handleSave () {
      this.$refs.menuRef.save(() => {
        // 添加完成后，刷新数据
        this.getAuthorityAll()
        // 提示
        this.$message.success('保存成功')
        // 隐藏添加框
        this.dialogVisible = false
      })
    },
    append(data) {
      this.menuId = 0
      this.title = '新增菜单'
      this.parentId = data.id
      this.parentName = data.title
      this.dialogVisible = true
      // const newChild = { id: id++, label: 'testtest', children: [] }
      // if (!data.children) {
      //   this.$set(data, 'children', [])
      // }
      // data.children.push(newChild)
    },
    remove(node, data) {
      this.$confirm('是否确认删除此菜单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get('/frontend/api/authority/deleteMenu', { id: data.id }).then(res => {
          this.$message.success('删除成功')
          // 刷新菜单列表
          this.getAuthorityAll()
        }).catch(errer => {
          this.$message.error(errer.message)
        })
      }).catch(() => {
      })
      // const parent = node.parent
      // const children = parent.data.children || parent.data
      // const index = children.findIndex(d => d.id === data.id)
      // children.splice(index, 1)
    },
    update(data) {
      debugger
      this.menuId = data.id
      this.title = '修改菜单'
      this.parentId = data.parentId
      this.parentName = data.title
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
